<template>
  <div class="page-wrapper">
    <div class="page-header">
      <span class="text-primary font-bold">菜单管理</span>
      <el-button type="primary" @click="handleAdd">新增菜单</el-button>
    </div>

    <div class="page-content">
      <div class="table-wrapper">
        <!-- 菜单树表格 -->
        <el-table
          :data="tableData"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          style="width: 100%"
        >
          <el-table-column prop="name" label="菜单名称" />
          <el-table-column prop="icon" label="图标" width="80">
            <template #default="{ row }">
              <el-icon v-if="row.icon">
                <component :is="row.icon" />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getMenuTypeTag(row.type)">{{ getMenuTypeLabel(row.type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="path" label="路由路径" />
          <el-table-column prop="permission" label="权限标识" />
          <el-table-column prop="sort" label="排序" width="80" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
              <el-button type="success" link @click="handleAdd(row)">添加子菜单</el-button>
              <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增菜单' : '编辑菜单'"
      width="600px"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="上级菜单">
          <el-tree-select
            v-model="form.parentId"
            :data="menuTree"
            :props="{ label: 'name', value: 'id' }"
            placeholder="请选择上级菜单"
            clearable
          />
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="图标" v-if="form.type !== 3">
          <el-input v-model="form.icon" placeholder="请选择图标">
            <template #append>
              <el-button @click="showIconPicker = true">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="路由路径" v-if="form.type !== 3" prop="path">
          <el-input v-model="form.path" placeholder="请输入路由路径" />
        </el-form-item>
        <el-form-item label="权限标识" v-if="form.type === 3" prop="permission">
          <el-input v-model="form.permission" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '系统管理',
    icon: 'Setting',
    type: 1,
    path: '/system',
    sort: 1,
    status: 1,
    children: [
      {
        id: 2,
        name: '菜单管理',
        icon: 'Menu',
        type: 2,
        path: '/system/menu',
        sort: 1,
        status: 1,
        children: [
          {
            id: 3,
            name: '新增菜单',
            type: 3,
            permission: 'system:menu:add',
            sort: 1,
            status: 1,
          },
        ],
      },
    ],
  },
])

// 菜单树数据
const menuTree = ref(tableData.value)

// 对话框控制
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
  parentId: null,
  type: 1,
  name: '',
  icon: '',
  path: '',
  permission: '',
  sort: 0,
  status: 1,
})

// 表单校验规则
const rules = {
  type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
  permission: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
}

// 获取菜单类型标签样式
const getMenuTypeTag = (type: number) => {
  const map: Record<number, string> = {
    1: '',
    2: 'success',
    3: 'info',
  }
  return map[type] || ''
}

// 获取菜单类型文本
const getMenuTypeLabel = (type: number) => {
  const map: Record<number, string> = {
    1: '目录',
    2: '菜单',
    3: '按钮',
  }
  return map[type] || ''
}

// 新增菜单
const handleAdd = (row?: any) => {
  dialogType.value = 'add'
  dialogVisible.value = true
  // 重置表单
  form.parentId = row?.id || null
  form.type = 1
  form.name = ''
  form.icon = ''
  form.path = ''
  form.permission = ''
  form.sort = 0
  form.status = 1
}

// 编辑菜单
const handleEdit = (row: any) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  // 填充表单
  Object.assign(form, row)
}

// 删除菜单
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除该菜单吗？', '提示', {
    type: 'warning',
  })
    .then(() => {
      // 实现删除逻辑
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

// 状态变更
const handleStatusChange = (row: any) => {
  const action = row.status === 1 ? '启用' : '禁用'
  ElMessage.success(`${action}成功`)
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      // 实现提交逻辑
      ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
      dialogVisible.value = false
    }
  })
}
</script>

<style scoped>
:deep(.el-table__row) {
  .el-tag {
    margin-right: 0;
  }
}
</style>
